<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>跟踪信息</title>
		<!--引入layui的css  -->
	<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
	<script src="../lib/layui-v2.6.3/layui.js"></script>
	<link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css">
	<script src="../js/global.js"></script>
	<body>
	<!-- 查询条件输入框 -->
	<div class="layui-form-item" style="margin-top: 10px;">
		<form class="layui-form" onsubmit="return false;">
			<label class="layui-form-mid">学生姓名:</label>
			<div class="layui-input-inline" style="width: 120px;">
				<input type="text" id="studentName" name="studentName" autocomplete="off" class="layui-input">
			</div>

			<label class="layui-form-mid">跟踪时间开始:</label>
			<div class="layui-input-inline" style="width: 120px;">
				<input type="text" id="beginTime" name="beginTime" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
			</div>
			<label class="layui-form-mid">跟踪时间结束</label>
			<div class="layui-input-inline" style="width: 120px;">
				<input type="text" id="endTime" name="endTime" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
			</div>

			<label class="layui-form-mid">跟踪状态:</label>
			<div class="layui-input-inline" style="width: 200px;">
				<select name="followState">
					<option value="0">请选择</option>
					<option value="1">已付款</option>
					<option value="2">正在跟踪</option>
					<option value="3">失败</option>
				</select>
			</div>
			
			<div class="layui-input-inline" style="width: 300px;">
				<button class="layui-btn" lay-submit="" lay-filter="search" id="search" data-type="reload"><i class="layui-icon">&#xe615;</i>搜索</button>
				<button class="layui-btn layui-btn-normal" type="reset" ><i class="layui-icon">&#xe666;</i>重置</button>
			</div>
		</form>
	</div>
	<!-- 修改的弹层页面  -->
	<div id="editLayer" style="display: none; margin-top: 20px;">
		<form class="layui-form" lay-filter="editForm" id="editForm"
			action="">
			<div class="layui-form-item">
				<label class="layui-form-label">学生姓名:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" name="studentName" class="layui-input"
						   autocomplete="off" lay-verify="required" readonly="readonly">
					<input type="hidden" name="id">
						<input type="hidden" name="studentId">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red">*</span>跟踪时间:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" name="followTime" class="layui-input"
						   autocomplete="off" lay-verify="required|datetime">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red">*</span>下次跟踪时间:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" name="nextFollowTime" lay-verify="required|datetime" class="layui-input"
						   autocomplete="off">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">内容:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" name="content" class="layui-input"
						   autocomplete="off">
				</div>
			</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red">*</span>跟踪状态:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<select  name="followState"lay-verify="required">
							<option value="">请选择</option>
							<option value="1">已付款</option>
							<option value="2">正在跟踪</option>
							<option value="3">失败</option>
						</select>
					</div>
				</div>

			<div class="layui-form-item">
				<label class="layui-form-label">跟踪类型:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<select name="followType" lay-verify="required">
						<option value="">请选择</option>
						<option value="1">电话跟踪</option>
						<option value="2">QQ跟踪</option>
						<option value="3">微信跟踪</option>
					</select>
				</div>
			</div>
			<div class="layui-btn-container" style="text-align: center;">
				<button class="layui-btn" lay-filter="editSubmit" lay-submit="">修改提交</button>
			</div>
		</form>
	</div>




		<!--定义数据表格table  -->
		<table class="layui-hide" id="proTable" lay-filter="filterTable"></table>
		
		<!--表格数据里的编辑、查看等操作按钮  -->
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs layui-btn-primary ops" ops="netfollows:edit" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</a>
			<a class="layui-btn layui-btn-xs layui-btn-danger ops" ops="netfollows:del" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a>
	</script>
		
		<!--表格工具栏的新增、批量等按钮  -->
		<script type="text/html" id="toolbarDemo">
  		<div class="layui-btn-container">
			<button class="layui-btn layui-btn-sm layui-btn-normal ops" ops="netfollows:export"  lay-event="export"><i class="layui-icon">&#xe654;</i>导出</button>
  		</div>
		</script>
		<script>
		
			//全局变量
			var cur_roleId; //正在编辑的角色id			
			var treeSelectedArr = []; //声明数组，用于保存选中的tree节点的Id
		
			layui.use(['laydate','layer','form','table','tree','upload','transfer'], function() {
				var laydate = layui.laydate	//日期组件
					,layer = layui.layer	//弹层组件
					,form = layui.form		//表单组件
					,upload = layui.upload  //上传组件
					,tree = layui.tree		//树形结构组件
					,$= layui.jquery    	//jQuery
					,table = layui.table	//表格组件
					,transfer = layui.transfer; //穿梭框组件
					
					//日期控件
					laydate.render({
						elem: '#beginTime',
					});
					laydate.render({
						elem: '#endTime',
					});
					laydate.render({
						elem: '#followTime',
						type:'datetime'
					});
					laydate.render({
						elem: '#nextFollowTime',
						type:'datetime'
					});

				//渲染表格，填充数据
			 	table.render({
					elem: '#proTable',			//对应上面定义的表格ID
					url: globalData.server+'netfollows/selectAllNetfollows?userId='+globalData.userId,					//提交到后台的地址
					headers:{token:globalData.token},
					method: 'get',				//提交方式 get或者post
					even: true, 				//表格隔行变色
					page: true,					//开启分页
					toolbar: '#toolbarDemo', 	//开启头部工具栏，并为其绑定左侧模板
					title: '跟踪表', 				//表格名称
					cols: [
						[{
							field: 'ck',
							fixed: 'left',
							type: 'checkbox',
							width: 100
						},{
							field: 'id',	//对应实体类里的属性    （必需有）
							fixed: 'left',	//固定方式，left左固定，right右固定 （可选）
							align:'center', //排列方式：left左对齐，center居中，right右对齐（可选）
							width: 80,		//单元格宽度（可选）	
							title: 'ID',	//表头名称			（必需有）
							sort: true		//开启排序（可选）
						}, {
							field: 'studentId',
							title: '学生ID',
							width: 100,
						},{
							field: 'studentName',
							title: '学生姓名',
							width: 140,
						},{
							field: 'followTime',	//对应实体类里的属性
							width: 180,		//单元格宽度
							title: '跟踪时间'		//表头名称
						}, {
							field: 'nextFollowTime',
							width: 180,
							title: '下次跟踪时间',
						}, {
							field: 'content',
							width: 180,
							title: '内容'
						},{
							field: 'userId',
							title: '跟踪者用户ID',
							width: 130,
						},{
							field: 'userName',
							title: '跟踪者用户名',
							width: 130,
						},{
					    	field: 'followType',
					    	title: '订单状态',
					    	width: 100,
					    	templet: function (d) {
					             if (d.followType == 1) {
					                 return '<div style="color:#5FB878;" >电话跟踪</div>';
					              }else if(d.followType == 2){
					                 return '<div style="color:#FF5722;" >QQ跟踪</div>';
					              }else if(d.followType == 3){
					                  return '<div style="color:#2F4056;" >微信跟踪</div>';
					              }
					           }
					  	},{
							field: 'createTime',
							title: '创建时间',
							width: 180,
						},{
							field: 'followState',
							title: '跟踪状态',
							width: 100,
							templet: function (d) {
								if (d.followState == 1) {
									return '<div style="color:#5FB878;" >已付款</div>';
								}else if(d.followState == 2){
									return '<div style="color:#FF5722;" >正在跟踪</div>';
								}else if(d.followState == 3){
									return '<div style="color:#2F4056;" >失败</div>';
								}else{
									return '<div style="color:#c2c2c2;" >000000</div>';
								}
							}
						},{
							fixed: 'right',
							width: 150,
							title: '操作',
							toolbar: '#barDemo'
						}]
					],
					done: function(res, curr, count){
						var myOps = sessionStorage.getItem("btnPermission");
						$(".ops").each(function(){
							if(myOps.indexOf($(this).attr('ops'))==-1){
								$(this).hide();
							}
						});
					}
				});
					
				/*
					条件查询	submit 对应 lay-submit  search 对应 lay-filter
				*/
			    form.on('submit(search)', function (data) {
	                var field = data.field;		//获取所有的输入条件值
	                //执行重载
	                table.reload('proTable', {
	                    page: { curr: 1 }, 		// 重载后回到第一页
	                    where: field			// 把所有的输入值传给后台
	                });
	            }); 
				
				//表格头部工具栏事件
				table.on('toolbar(filterTable)', function(obj){
				    switch(obj.event){
				      	//批量删除按钮
						case 'export'://导出excel
							//获取选中的数据
							var checkStatus = table.checkStatus('proTable');
							var ids = [];
							for(var i=0; i<checkStatus.data.length; i++){
								ids.push(checkStatus.data[i].id)
							}
							//拼接id(把数组转成字符串，并且用逗号拼接),比如ids=[2,5,6]，那么id='2,5,6'
							var idStr = ids.join(',');
							window.location.href = globalData.server+"netfollows/export?"+$("#queryForm").serialize()+"&token="+globalData.token+"&userId="+globalData.userId+"&idStr="+idStr;
							break;
				    };
				  });
				
			  	//数据表格里的事件监听
				table.on('tool(filterTable)',function(obj){
					var data = obj.data;//获取当前行的数据
					
					switch(obj.event){
				      case 'edit':		//修改操作
				    	  
				    		//数据的回显
							form.val("editForm", data);
							//打开弹层
							layer.open({
								type:1, 
								title: '您正在修改编号【'+ data.id + '】的信息',
								content: $('#editLayer'),
								area: ['60%','80%']
							});
				    	  
				      break;
				      case 'del':		//删除操作
				    		if(confirm("确定删除吗？")){
				    			$.ajax({
									type: 'post', 					//提交方式get或post
									url: globalData.server+'netfollows/deleteById',	 					//提交路径
									headers:{token:globalData.token},
									data: {"id":data.id}, 			//参数
									dataType: 'json', 				//返回的数据类型
									success: function(res) { 		//提交成功
										layer.alert(res.msg);		//提示信息
										table.reload('proTable'); 	// 修改后要刷新表格
									},
									error: function() { //提交失败
										alert("系统异常！！")
									}
								}); 
				    		}
			      	  break;
			    	};
				})
				//修改弹层的提交按钮
				form.on('submit(editSubmit)', function(data) {
					$.ajax({
						type: 'post', 					//提交方式get或post
						url: globalData.server+'netfollows/updateNetfollows', 						//提交路径
						headers:{token:globalData.token},
						data: $("#editForm").serialize(), 	//参数
						dataType: 'json', 					//返回的数据类型
						success: function(res) { 		//提交成功
							layer.closeAll();			//关闭弹层
							layer.alert(res.msg);		//提示信息
							table.reload('proTable'); 	//刷新表格
						},
						error: function() { //提交失败
							alert("系统异常！！")
						}
					}); 
					return false;
				});
			});
		</script>
	</body>
</html>
